<template>
  <section class="w-[280px] h-screen">
    <article
      class="relative flex justify-center items-center h-[55px] bg-white border-b border-b-[#dedede]"
    >
      <im-search v-model:search-input="searchInput"  v-model:filtered-list="filteredContactList" :total-list="contactList"></im-search>
      <article class="absolute mx-auto top-12 border rounded bg-white border-[#dedede] w-[210px]">
        <div v-for="contact in filteredContactList" :key="contact.id" class="flex gap-x-2 h-16 p-2 border-b border-b-[#dedede] overflow-x-hidden">
          <img :src="contact.avatar" ></img>
          <article class="overflow-x-hidden">
            <div v-html="highlightSearch(contact.name+'😀',searchInput)" class="truncate"></div>
            <div  class="text-xs  text-[#9a9a9a] truncate">昵称：<span v-html="highlightSearch(contact.nickname,searchInput)"></span></div>
          </article>
        </div>
      </article>
    </article>
    <article class="bg-[#f7f7f7] h-full">
      <article class="border  bg-white border-[#dedede]">
        <div v-for="contact in contactList" :key="contact.id" class="flex gap-x-2 h-16 p-2 border-b border-b-[#dedede] overflow-x-hidden" :class="activeUser.id ===contact.id ? 'bg-[#d2d2d2]':'' " @click="activeUser = contact">
          <img :src="contact.avatar" ></img>
          <article class="overflow-x-hidden">
            <div class="truncate">{{ contact.name }}😀</div>
            <div class="text-xs  text-[#9a9a9a] truncate">昵称：{{ contact.nickname }}</div>
          </article>
        </div>
      </article>
    </article>
  </section>
</template>
<script lang="ts" setup>
// App.vue
import type { UserListType } from '@renderer/api/user/type'
import { getUserList } from '@renderer/api/user/index'
import {chineseEmojis} from '@renderer/utils/emoji'
const filteredContactList = ref<UserListType[]>([])
const contactList = ref<UserListType[]>([])
const searchInput = ref('')
const activeUser = ref({} as UserListType)

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& 表示整个匹配的字符串
}
 
function highlightSearch(originalString, searchTerm) {
  console.log('coming',searchTerm);
  
  // 使用 escapeRegExp 函数确保 searchTerm 中的特殊字符被正确处理
  const escapedSearchTerm = escapeRegExp(searchTerm);
  const regex = new RegExp(escapedSearchTerm, 'gi'); // 创建一个不区分大小写的全局正则表达式
 console.log({escapedSearchTerm,searchTerm});
 
  // 使用正则表达式替换所有匹配项，并高亮显示
  return originalString.replace(regex, '<span style="color: #168d2e;">$&</span>');
}




onMounted(async () => {
  // 获取用户信息
  const { data } = await getUserList()
  contactList.value = data
})
</script>
<style lang="scss" scoped></style>
